<template>
    <div class="suggest">
        <h3 @click="$emit('changekeyword',keywords)">搜索“{{keywords}}”</h3>
        <ul>
            <li v-for="s in sugArray"
             :key="s.id"
              @click="$emit('changekeyword',s.keyword)">
                <i class="fa fa-search" aria-hidden="true"></i>
                <span>{{s.keyword}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
import _ from 'lodash'
export default {
    props:{
        keywords:String
    },
    data(){
        return {
            sugArray:[],
            // isSearch:false  //加载效果  未完成
        }
    },
    methods:{
        getSearch:_.debounce(function(value){
            // console.log("this==>",this)
            // this.isSearch=true;
            this.axios.get(`/search/suggest?keywords=${value}&type=mobile`)
            .then(result=>{
                // console.log(result);
                // this.isSearch=false;
                this.sugArray=result.allMatch;               
            })
        },300)
    },
    created(){
        this.getSearch(this.keywords);
    },
    watch:{
        keywords(newValue){
            this.getSearch(newValue);
        }
    }
}
</script>
<style lang="less" scoped>
.suggest{
    padding: 0px 10px;
    h3{
        font-size: 14px;
        color: #5959cc;
        line-height: 50px;
        border-bottom: 1px solid #f0eeee;
    }
    ul{
        li{
            line-height: 45px;
            font-size: 15px;
            border-bottom: 1px solid #f0eeee;
            color: #333;
            i{
                color: #c9c9c9;
                font-size: 16px;
            }
            span{
                padding-left: 10px;
            }
        }
    }
}
</style>